<template>
  <div class="user-login">
    <div class="login-form">
      <div class="form-top">
        <span class="title">用户登录</span>
      </div>
      <div class="form-main">
        <a-tabs :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }">
          <a-tab-pane key="tab1" tab="账号密码登录">
            <a-form>
              <a-form-item>
                <a-input size="large" type="text" placeholder="账号">
                  <a-icon
                    slot="prefix"
                    type="user"
                    :style="{ color: 'rgba(0,0,0,.25)' }"
                  />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-input-password size="large" placeholder="密码">
                  <a-icon
                    slot="prefix"
                    type="lock"
                    :style="{ color: 'rgba(0,0,0,.25)' }"
                  />
                </a-input-password>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="tab2" tab="手机号登录">
            <a-form-item>
              <a-input size="large" type="text" placeholder="手机号">
                <a-icon
                  slot="prefix"
                  type="mobile"
                  :style="{ color: 'rgba(0,0,0,.25)' }"
                />
              </a-input>
            </a-form-item>

            <a-row :gutter="16">
              <a-col class="gutter-row" :span="16">
                <a-form-item>
                  <a-input size="large" type="text" placeholder="验证码">
                    <a-icon
                      slot="prefix"
                      type="mail"
                      :style="{ color: 'rgba(0,0,0,.25)' }"
                    />
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="8">
                <a-button
                  class="captcha"
                  :disabled="captcha.show"
                  @click="getCaptcha"
                  v-text="
                    (!captcha.show && '获取验证码') || captcha.time + ' s'
                  "
                ></a-button>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>

        <a-form-item>
          <a-checkbox> 自动登录 </a-checkbox>
          <a class="forge-password" style="float: right" href="javascrip:">
            忘记密码
          </a>
        </a-form-item>

        <a-form-item style="margin-top: 24px">
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            class="login-button"
            >登录</a-button
          >
        </a-form-item>
      </div>
      <div class="form-footer"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      captcha: {
        show: false,
        time: 60,
      },
    };
  },
  methods: {
    getCaptcha() {
      this.captcha.show = true;
      const interval = window.setInterval(() => {
        if (this.captcha.time-- <= 0) {
          this.captcha.time = 60;
          this.captcha.show = false;
          window.clearInterval(interval);
        }
      }, 1000);
    },
  },
};
</script>

<style lang="stylus">
.user-login {
  width: 100%;
  min-height: 100%;
  background: #f0f2f5 url('~@/assets/background.svg') no-repeat 50%;
  background-size: 100%;
  position: relative;

  .login-form {
    padding: 80px 0 20px;

    .form-top {
      text-align: center;

      .title {
        font-size: 33px;
        color: rgba(0, 0, 0, 0.85);
        font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
        font-weight: 600;
      }
    }

    .form-main {
      min-width: 260px;
      width: 368px;
      margin: 30px auto 0;

      .captcha {
        display: block;
        width: 100%;
        height: 40px;
      }

      button.login-button {
        padding: 0 15px;
        font-size: 16px;
        height: 40px;
        width: 100%;
      }
    }
  }
}
</style>
